/**
 * Tiem: 2023-03-15
 * FileName: 商城首页轮播，广告位
 * Editor: DH
 * 
 */

import React, { Component } from 'react';
import { Switch, Space, } from "antd"
import TheTable from "../../../components/TheTable";
import TheButton from "../../../components/TheButton";
import TheDialog from "../../../components/TheDialog";
import '../style/index.less'
import { apiGetShufflingPage, apiGetShufflingAdd, apiGetShufflingEdit, apiGetShufflingDel,apiUpdateStatusBySite } from '@/request/configuration'
import TheImage from "../../../components/TheImage";
import Editor from "../shuffling/component/editor";
import ThePagination from "@/components/ThePagination";

class Shuffling extends Component {
  state = {
    loading: false,
    dataSource: null,
    activeDataSource: [],
    category: '',
    columnsCarouse: [
      {
        title: "图片",
        dataIndex: "configCarouselFilez",
        key: "configCarouselFilez",
        render: (text, record) => {
          return <TheImage width={270} height={106} src={record.configCarouselFilez} />
        }
      },
      {
        title: "标题",
        dataIndex: "configCarouselTitle",
        key: "configCarouselTitle"
      },
      {
        title: "排序",
        dataIndex: "configCarouselSort",
        key: "configCarouselSort"
      },
      {
        title: "操作",
        render: (text, record) => {
          let category = ''
          switch (record.configCarouselSite) {
            case 1:
              category = 'carousel'
              break;
            case 2:
              category = 'active'
              break;
            case 8:
              category = 'card'
              break;
            default:
              break;
          }
          return <>
            <TheButton haspermi={['shop:shuffling:Edit']} onClick={() => this.openDialog('editor', category , record)}>修改</TheButton>
            <TheButton haspermi={['shop:shuffling:Delete']} onClick={() => this.del(record)}>删除</TheButton>
          </>
        }
      },
    ],
    columnsActive: [
      {
        title: "图片",
        dataIndex: "configCarouselFilez",
        key: "configCarouselFilez",
        render: (text, record) => {
          return <TheImage width={270} height={106} src={record.configCarouselFilez} />
        }
      },
      {
        title: "标题",
        dataIndex: "configCarouselTitle",
        key: "configCarouselTitle"
      },
      {
        title: "排序",
        dataIndex: "configCarouselSort",
        key: "configCarouselSort"
      },
      {
        title: "操作",
        render: (text, record) => {
          return <>
            <TheButton haspermi={['shop:shuffling:Edit']}  onClick={() => this.openDialog('editor', 'cardCross', record)}>修改</TheButton>
            {/* <TheButton haspermi={['set:shuffling:activeDelete']} onClick={() => this.del(record)}>删除</TheButton> */}
          </>
        }
      },
    ],
    dialogStatus: false,
    title: '',
    radioValue: '',
    initialValues: null,
    btnLoading: false,
    activeLoading: false,
    edit: false,
    type: "",
    total: 0,
    pageParams: {
      pageNo: 1,
      pageSize: 3,
    },
    pageCard: {
      pageNo: 1,
      pageSize: 3,
    },
    cardDataSource:[],
    cardSource:[],
    activetotal:0,
    Cardtotal:0,
    cardloading:true,
    cardSwitch:false,
    backgroundSwitch:false,
    topbg:[],
    middlebg:[],
    bottombg:[]
  }
  async componentDidMount() {
    let { pageNo, pageSize } = this.state.pageParams
    await this.getBannerData(pageNo, pageSize)
    await this.getCardAdsData()
    await this.getCardBannerData( pageNo, pageSize)
  }
  
  getBannerData = async (pageNo, pageSize) => {
    const bannerHome = await apiGetShufflingPage({ configCarouselSite: '3', pageNo, pageSize })
    if (bannerHome.code === 0) {
      this.setState({
        dataSource: bannerHome.data,
        loading: false,
        total: bannerHome.totalCount,
        pageParams:{
          pageNo,
          pageSize
        }
      })
    } else {
      this.setState({
        dataSource: null,
        loading: false
      })
    }
  }
  getCardBannerData = async (pageNo, pageSize) => {
    const cardBanner = await apiGetShufflingPage({ configCarouselSite: '12', pageNo, pageSize })
    if (cardBanner.code === 0) {
      if(cardBanner.data.length !== 0 && cardBanner.data[0].configCarouselStatus === 'Y'){
        this.setState({
          cardSwitch:true
        })
      } 
      this.setState({
        cardDataSource: cardBanner.data,
        cardloading: false,
        Cardtotal: cardBanner.totalCount,
        pageCard: {
          pageCardNo:pageNo,
          pageCardSize:pageSize
        }
      })
    } else {
      this.setState({
        cardDataSource: null,
        cardloading: false
      })
    }
  }
  getCardAdsData = async () => {
    const cardAds = await apiGetShufflingPage({ configCarouselSite: '11', pageNo:1, pageSize:2 })
    if (cardAds.code === 0) {
      this.setState({
        cardSource: cardAds.data,
        loading: false,
        // total: cardAds.totalCount,
      })
    } else {
      this.setState({
        cardSource: null,
        loading: false
      })
    }
  }

  update = value => {
    this.setState({
      dialogStatus: true,
      title: '修改轮播图',
      initialValues: value,
      radioValue: value.configCarouselType,
      edit: true
    })
  }

  del = record => {
    React.$confirm({
      title: "警告",
      content: `确定删除此信息吗？`,
      onOk: async () => {
        this.setState({
          loading: true,
        })
        const data = await apiGetShufflingDel({ configCarouselId: record.configCarouselId })
        if (data.code === 0) {
          await this.getBannerData(1,3)
          await this.getCardAdsData()
          await this.getCardBannerData(1,3)
          this.setState({
            loading: false
          })
        } else {
          this.setState({
            loading: false
          })
        }
      }
    });
  }
  openDialog = (type, category, value, couponId) => {
    let title = ''
    switch (category) {
      case 'carousel':
        title = '顶部banner轮播图'
        break;
      case 'card':
        title = '中层banner轮播图'
        break;
      case 'cardCross':
        title = '卡片广告位'
        break;
      default:
        break;
    }
    if (type === "editor") {

      this.setState({ title: "修改"+title, dialogStatus: true, initialValues: value, couponId, type: 'editor', edit: true, category });
    } else {

      this.setState({ title: "新增"+title, dialogStatus: true, initialValues: null, type: 'add', category });
    }
  }
  dialogCancel = () => {
    this.setState({
      dialogStatus: false,
      title: '',
      btnLoading: false,
      initialValues: null,
      edit: false
    })
  }
  onFinish = async values => {
    const { edit, initialValues, category } = this.state
    this.setState({
      btnLoading: true
    })
    let data = null
    let configCarouselSite = ''
    let configSiteType = ''
    switch (category) {
      case 'carousel':
        configCarouselSite = '3'
        break;
      case 'card':
        configCarouselSite = '12'
        break;
      case 'cardCross':
        configCarouselSite = '11'
        break;
      default:
        break;
    }
    if (edit) {
      data = await apiGetShufflingEdit({ ...values, configCarouselId: initialValues.configCarouselId, configCarouselSite,configSiteType })
    } else {
      data = await apiGetShufflingAdd({ ...values, configCarouselSite,configSiteType })
    }
    if (data.code === 0) {
      this.setState({
        pageParams: {
          pageNo: 1,
          pageSize: 3
        }
      })
      await this.dialogCancel()
      await this.getBannerData(1,3)
      await this.getCardAdsData()
      await this.getCardBannerData(1,3)
      if (initialValues) {
        React.$message({
          type: 'info',
          content: '修改成功'
        })
      } else {
        React.$message({
          type: 'info',
          content: '新增成功'
        })
      }
    } else {
      this.setState({
        btnLoading: false
      })
    }
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageParams: {
        pageNo,
        pageSize
      }
    })
    this.getBannerData(pageNo, pageSize)
  }
  
  pageCardChange = (pageNo, pageSize) => {
    this.setState({
      pageCard: {
        pageCardNo:pageNo,
        pageCardSize:pageSize
      }
    })
    this.getCardBannerData(pageNo, pageSize)
  }

  bannerOnChange = async (e) => {
    const { cardSource } = this.state
    if(cardSource.length !== 0 ){
      let status = 'N'
      if(e){
        status = 'Y'
      }
      let res = await apiUpdateStatusBySite({configCarouselSite: '11',configCarouselStatus:status})
      if(res.code === 0){
        React.$message({
          type:'info',
          content: status === 'Y' ? '卡片广告位开启成功！' : '卡片广告位关闭成功！'
        })
        this.setState({
          cardSwitch:e
        })
      }
    }else{
      React.$message({
        type:'warning',
        content:'无卡片广告数据不可开启！'
      })
    }
  }
  
  render() {
    const { loading, dataSource, cardSwitch, cardDataSource,cardSource, columnsActive, columnsCarouse,  category, dialogStatus, title, btnLoading, initialValues, type, total, Cardtotal,cardloading } = this.state
    const { pageNo, pageSize, } = this.state.pageParams
    const { pageCardNo, pageCardSize, } = this.state.pageCard
    return <div className={"p-layout-box configuration"}>
      <div>
        <div className={"p-layout-header shufflingDiv"} >
          <h2>顶部banner轮播图</h2>
          <TheButton type={'default'} size={'middle'} auth={'shuffling:add'}
            onClick={() => { this.openDialog('add', 'carousel') }} haspermi={['shop:shuffling:Add']}>新增</TheButton>
        </div>
        <div className={"p-layout-content-pagination"}>
          <TheTable loading={loading} dataSource={dataSource} columns={columnsCarouse} />
          <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
        </div>
      </div>

      <div style={{marginTop:'100px'}}>
        <div className={"p-layout-header shufflingDiv"}>
          <h2>中层banner轮播图</h2>
          <TheButton type={'default'} size={'middle'} haspermi={['shop:shuffling:Add']}
            onClick={() => { this.openDialog('add', 'card') }}>新增</TheButton>
        </div>
        <div className={"p-layout-content-pagination"}>
          <TheTable loading={cardloading} dataSource={cardDataSource} columns={columnsCarouse} />
          <ThePagination pageNo={pageCardNo} pageSize={pageCardSize} total={Cardtotal} 
          pageChange={this.pageCardChange}
          />
        </div>
      </div>

      <div style={{marginTop:'100px'}}>
        <div className={"p-layout-header shufflingDiv"} >
          <Space>
            <h2>一行2个卡片广告位</h2>
            <div style={{color:'#bbb',fontSize:'13px'}}>
              <Switch checked={cardSwitch} onClick={this.bannerOnChange} />
              &nbsp;&nbsp;行数据不可删除，开启/关闭后在商城页显示/不显示
            </div>
          </Space>
          {cardSource.length < 2 ? <TheButton type={'default'} size={'middle'} haspermi={['shop:shuffling:Add']}
            onClick={() => { this.openDialog('add', 'cardCross') }}>新增</TheButton> : null}
        </div>
        <div className={"p-layout-content-pagination"}>
          <TheTable loading={loading} dataSource={cardSource} columns={columnsActive} />
        </div>
      </div>
      
      <TheDialog
        visible={dialogStatus}
        title={title}
        width={800}
        handleCancel={this.dialogCancel}
        footer={null}
      >
        <Editor dialogCancel={this.dialogCancel} onFinish={this.onFinish} data={initialValues}
          btnLoading={btnLoading}
          type={type}
          category={category} />
      </TheDialog>
    </div>
  }
}

export default Shuffling